<template>
    <div class="newsinfo-container">
        <!-- 标题区域 -->
        <h3 class="title">{{newsinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{newsinfo.add_time | globalDateFormat}}</span>
            <span>点击:{{newsinfo.click}}次</span>
        </p>

        <hr>
        <!-- 内容区域 -->
        <div class="container" v-html="newsinfo.content">
        </div>

        <!-- 评论区域 -->
        <comment-box :newsID="this.id"></comment-box>
    </div>
</template>

<script>

    import { Toast } from "mint-ui";

    import  commentCpnpoment from '../subcomponents/comment.vue'

    export default {

        data(){ 
            return {
                id : this.$route.params.id,
                newsinfo : {},
            }
        },

        created() {
            this.getNewsInfoAction();
        },

        methods:{

            getNewsInfoAction() {
                this.$http.get('http://mint-ui.github.io/docs/#/zh-cn2/swipe666').then(result=> {
                    if(result.status==200) {
                        this.newsinfo = {
                            id:2001,
                            title: 'Mate 20系列手机体验',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0008/2018-10-16/DU8HI4JU5BD20008NOS.jpg',
                            click : 2,
                            add_time : '2018-10-12T10:30:20.000Z',
                            content : '<p class="f_center"><img alt="马思纯" src="http://cms-bucket.nosdn.127.net/catchpic/f/f3/f3fd8410b79246c88777f5d71cb7b70f.gif?imageView&amp;thumbnail=550x0&amp;tostatic=0" style="border-width: 0px; border-style: none; border-; vertical-align: middle; display: block; margin: 0px auto; max-width: 640px; ; ;Hiragino Sans GB&quot;, &quot;Microsoft Yahei&quot;, 微软雅黑, SimSun, 宋体, Arial; ; letter-spacing: 1px; text-align: center;">马思纯</p><p><b>网易娱乐10月17日报道&nbsp;</b>10月17日，马思纯在微博晒出一则视频，视频中她头戴兔耳朵帽子，眼神呆萌玩得十分开心，随后被自己逗乐发出“呵呵呵呵呵呵”的魔性笑声，最后还懵懵地对着镜头“啊？”了一声。网友纷纷评论：“哪里来的可爱兔兔！”“这只兔子我先带回家了！”</p>'
                        }
                    }else {
                        Toast('获取新闻详情失败！');
                    }
                });
            }

        },

        components : {
            "comment-box": commentCpnpoment,
        }

    }
</script>

<style lang="scss">
.newsinfo-container{
    padding: 0 4px;
    .title {
        font-size :16px;
        color: red;
        text-align: center;
        margin:  15px 0;
    }

    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #226aff;
    }

    .container {
        img {
            width: 100%;
        }
    }
}
</style>
